import { useEffect, useState } from "react";

const Demo2 = () => {
  const [count, setCount] = useState(1);
  const [value, setValue] = useState(100);
  // useEffect 处理副作用
  // useEffect(setup, devp)
  // setup 是一个函数

  useEffect(() => {
    // setup
    // 1. 组件首次渲染完毕（挂载就绪）执行一次
    console.log('setup', count);
    // 2. （依赖项发生改变）组件更新完毕（更新就绪）执行一次


    return () => {
      // 清理函数 cleanup
      // 1. 每次更新前执行一次
      console.log('cleanup', count);

      // 2. 组件卸载执行一次
    }
  });





  return (
    <div className="demo2">
      <h1>count: {count}</h1>
      <div>
        <button onClick={() => setCount(count + 1)}>+1</button>
      </div>

      <h1>value: {value}</h1>
      <div>
        <button onClick={() => setValue(value + 1)}>+1</button>
      </div>
    </div>
  );
};

export default Demo2;
